<template>
	<view>
		<view view class="inv-h-w">
			<view class="inv-card" @click="inv_se = 1">
				<view :class="['title',inv_se==1?'selected-title':'']">
					<text v-if="inv_se==1">
						<text class="iconfont">&#xe624;</text> 待作答评估
					</text>
					<text class="iconfont" v-else>&#xe624;</text>
				</view>
			</view>
			<view class="inv-card" @click="inv_se = 2">
				<view :class="['title',inv_se==2?'selected-title':'']">
					<text v-if="inv_se==2">
						<text class="iconfont">&#xe61f;</text> 我的评估
					</text>
					<text class="iconfont" v-else>&#xe61f;</text>
				</view>
			</view>
		</view>
		<view v-show="inv_se == 1">
			<view class="no-content" v-if="info1==null||info1.length===0">
				<text>已将到底了</text>
			</view>
			<view class="content" v-for="(item, index) in info1" :key="index">
				<text class="icon">&#xe638;</text>
				<view class="info" @click="go1(item.questionnaire.questionnaireId, item.questionnaire.name, item.questionnaire.con)">
					<view class="name">{{item.questionnaire.name}}</view>
					<view class="con">{{item.questionnaire.con}}</view>
				</view>
			</view>
		</view>
		<view v-show="inv_se == 2">
			<view class="no-content" v-if="info2==null||info2.length===0">
				<text>已将到底了</text>
			</view>
			<view class="content" v-for="(item, index) in info2" :key="index">
				<text class="icon">&#xe638;</text>
				<view class="info" @click="go2(item.questionnaire.questionnaireId)" @longtap="delQ(item.questionnaire.questionnaireId)">
					<view class="name">{{item.questionnaire.name}}</view>
					<view class="con">{{item.questionnaire.con}}</view>
				</view>
			</view>
		</view>
		<view class="fix_button" @click="make">+</view>
	</view>
</template>

<script>
	import {
		getQuestionnaireList,
		getMyQuestionnaireList,
		delQuestionnaire
	} from '@/api/questionnaire.js'

	export default {
		data() {
			return {
				inv_se: 1,
				info1: [],
				info2: []
			}
		},
		methods: {
			getData() {
				getQuestionnaireList({
					userId: getApp().globalData.id,
					answer: 0
				}).then(res => {
					// this.info1 = res.data.data
					this.info1 = []
					for(let i in res.data.data){
						if(res.data.data[i].questionnaire.type == 2){
							this.info1.push(res.data.data[i])
						}
					}
				}).catch(err=>{
					uni.showModal({
						content:'请求失败'
					})
				})
				getMyQuestionnaireList({
					creatorId: getApp().globalData.id,
					type: 2
				}).then(res => {
					this.info2 = res.data.data
				}).catch(err=>{
					uni.showModal({
						content:'请求失败'
					})
				})
			},
			go1(qid, name, con) {
				uni.navigateTo({
					url: './assessmentDetail?qid=' + qid + '&name=' + name + '&con=' + con
				})
			},
			go2(qid) {
				uni.navigateTo({
					url: './assessmentAnswer?qid=' + qid
				})
			},
			delQ(qid){
				uni.showModal({
					content:'确定删除？',
					success:res=> {
						if(res.confirm){
							delQuestionnaire({
								questionnaire:{
									questionnaireId:qid
								}
							}).then(res=>{
								console.log(res)
								if(res.data.code==0){
									uni.showModal({
										content:'删除成功'
									})
									this.getData()
								}
							})
						}
					}
				})
			},
			make(){
				uni.navigateTo({
					url: './makeAssessment'
				})
			}
			
		},
		onLoad() {
			this.getData()
		},
		onShow() {
			this.getData()
		}
	}
</script>

<style>
	page{
		font-family: 'Courier New', Courier, monospace;
	}
	.iconfont {
		font-family: "iconfont" !important;
		font-size: 20px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.inv-h-w {
		height: 50px;
		background-color: #ffffff;
		border-bottom: 1px solid #F7F7F7;
	}

	.inv-card {
		height: 100%;
		line-height: 50px;
		display: inline-block;
		position: relative;
	}

	.inv-card .title {
		color: #FFFFFF;
		height: 50px;
		font-size: 18px;
		box-sizing: border-box;
		background-color: #ffaa00c2;
		padding-right: 40px;
		padding-left: 10px;
	}

	.inv-card .selected-title {
		background-color: #ffaa00;
	}

	.inv-card ::after {
		content: "";
		position: absolute;
		right: 0;
		top: 0;
		border-right: 50px solid white;
		border-left: 50px solid transparent;
		border-bottom: 50px solid transparent;
	}

	.no-content {
		display: flex;
		height: auto;
		padding: 10px;
		font-size: 14px;
		justify-content: center;
		align-items: center;
		background-color: #f7f7f7;
	}

	.content {
		width: 100%;
		height: 150rpx;
		border-bottom: 1px solid #EEEEEE;
	}

	.content .icon {
		font-family: "iconfont" !important;
		font-size: 60rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		margin: 0 20rpx;
		color: #41a5ee;
		float: left;
		line-height: 150rpx;
	}

	.content .name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.content .info {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		height: 100%;
		padding: 30rpx 0 30rpx 30rpx;
	}

	.content .info .con {
		color: #CCCCCC;
		font-size: 14px;
	}
	.fix_button{
		width:100rpx;
		height: 100rpx;
		text-align: center;
		line-height: 90rpx;
		background-color: #ffaa00;
		position: fixed;
		bottom: 50rpx;
		right:50rpx;
		font-size: 100rpx;
		color: #FFFFFF;
		border-radius: 50%;
		box-shadow: 0px 0px 8rpx 8rpx #DDDDDD;
		z-index: 10;
	}
</style>
